<style type="text/css">
    /* CSS for the traditional context menu */
    #contextMenu {
        z-index: 10001;
        position: absolute;
        left: 5px;
        border: 1px solid #444;
        background-color: #F5F5F5;
        display: none;
        box-shadow: 0 0 10px rgba(0, 0, 0, .4);
        font-size: 12px;
        font-family: sans-serif;
        font-weight: bold;
    }

    #contextMenu ul {
        list-style: none;
        top: 0;
        left: 0;
        margin: 0;
        padding: 0;
    }

    #contextMenu li a {
        position: relative;
        min-width: 60px;
        color: #444;
        display: inline-block;
        padding: 6px;
        text-decoration: none;
        cursor: pointer;
    }

    #contextMenu li:hover {
        background: #CEDFF2;
        color: #EEE;
    }

    #contextMenu li ul li {
        display: none;
    }

    #contextMenu li ul li a {
        position: relative;
        min-width: 60px;
        padding: 6px;
        text-decoration: none;
        cursor: pointer;
    }

    #contextMenu li:hover ul li {
        display: block;
        margin-left: 0px;
        margin-top: 0px;
    }
</style>
<div class="col-sm-12">
    <div class="col-sm-2" style="margin-bottom: 10px;">
        <m-ui-select prompt="请选择所属产品"
                     itme-list="sysList"
                     selected-item="selectSys"
                     select-item-fun="selectSysItem(item)">
        </m-ui-select>
    </div>
    <div class="col-sm-2" style="margin-bottom: 10px;">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="请输入查询节点..." ng-model="$ctrl.search"
                   style="height: 36px;" ng-keyup="enterEvent($event)">
            <span class="input-group-addon" title="查询" ng-click="search()">
                <i class="fa fa-search"></i>
            </span>
        </div>
    </div>
    <div class="col-sm-12">
        <div id="myDiagramDiv"
             style="background-color: white; border: solid 1px black; width: 100%; height: 550px"></div>
        <div id="contextMenu">
            <ul>
                <li id="move" ng-click="moveBtn()" ng-show="!$ctrl.isFeatureMap">
                    <a href="javascript:void(0);"><i class="fa fa-paw"></i> 移动</a>
                </li>
                <li id="addMenu" ng-click="addMenuBtn()">
                    <a href="javascript:void(0);"><i class="fa fa-plus"></i>添加菜单</a>
                </li>
                <li id="addPage" ng-click="addPageBtn()">
                    <a href="javascript:void(0);"><i class="fa fa-plus"></i>添加页面</a>
                </li>
                <li id="addFeature" ng-click="addFeatureBtn()">
                    <a href="javascript:void(0);"><i class="fa fa-plus"></i>添加功能点</a>
                </li>
                <li id="removeNode" ng-click="removeBtn()" ng-show="!$ctrl.isFeatureMap">
                    <a href="javascript:void(0);"><i class="fa fa-trash-o"></i>删除</a>
                </li>
                <li id="edit" ng-click="editBtn()" ng-show="!$ctrl.isFeatureMap">
                    <a href="javascript:void(0);"><i class="fa fa-cog"></i> 修改标题</a>
                </li>
                <li id="findFeature" ng-click="findFeatureBtn()" ng-show="!$ctrl.isFeatureMap">
                    <a href="javascript:void(0);"><i class="fa fa-eye"></i>查看功能点</a>
                </li>
                <li id="history" ng-click="historyBtn()" ng-show="!$ctrl.isFeatureMap">
                    <a href="javascript:void(0);"><i class="fa fa-mail-reply"></i>历史记录</a>
                </li>
                <li id="toSort" ng-click="sortBtn()" ng-show="!$ctrl.isFeatureMap">
                    <a href="javascript:void(0);"><i class="fa fa-sort-amount-asc"></i>排序</a>
                </li>
                <li id="relate" ng-click="relateBtn()" ng-show="$ctrl.isFeatureMap">
                    <a href="javascript:void(0);"><i class="fa fa-code-fork"></i> 拉分支</a>
                </li>
                <li id="relive" ng-click="reliveBtn()" ng-show="$ctrl.isFeatureMap">
                    <a href="javascript:void(0);"><i class="fa fa-chain-broken"></i> 重置</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="col-sm-12" style="margin-top: 10px;">
        <button class="btn btn-default" ng-click="zoomToFit()">缩小</button>
        <button class="btn btn-default" ng-click="centerRoot()">居中</button>
    </div>
</div>